<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
    <style>
        table td:first-child {
            color: white;
        }
        
        .inputs {
            vertical-align: middle;
            height: 30px;
            width: 140px;
        }
        
        #check {
            margin-left: 150px;
        }
        
        body {
            background-image: url("imgs/reg_bg_min1.jpg");
            text-align: center;
        }
    </style>
</head>

<body>

    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="login.html">登录</a>
        </div>
        <form id="reg-form" action="/registerServlet" method="post">

            <table>

                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>

                </tr>

                <tr>
                    <td>密　码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td class="inputs">
                        <input name="checkCode" type="text" id="checkCode">
                        <img src="/checkCodeServlet" id="checkCodeImg">
                        <a href="javascript:void(0)" id="changeImg">看不清？</a>
                        <script>
                            document.getElementById("changeImg").onclick = function() {
                                //路径后面添加时间戳的目的是避免浏览器进行缓存静态资源
                                document.getElementById("checkCodeImg").src = "/checkCodeServlet?" + new Date().getMilliseconds();
                            }
                        </script>

                    </td>
                </tr>


            </table>


            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>

    </div>
</body>

</html>